// import counterStore from './store/counterStore'
// import personStore from './store/personStore'
import { useStore } from './store/index.js'
import { observer } from 'mobx-react-lite'
import { useEffect } from 'react'
import Foo from './components/Foo.jsx'
import Bar from './components/Bar.jsx'

function App() {

  const store = useStore()

  useEffect(() => {
    store.personStore.getSingers() // 异步代码，不建议直接调用
  }, [])

  return (
    <div>
      <button onClick={() => {store.counterStore.addCount()}}>{store.counterStore.count}</button>

      <ul onClick={() => {store.counterStore.changeList()}}>
        {
          store.counterStore.filterList.map((item, index) => {
            return <li key={item}>{item}</li>
          })
        }
      </ul>

      <ul>
        {
          store.personStore.singers.map((item, index) => {
            return <li key={item.name}>{item.name}</li>
          })
        }
      </ul>

      <Foo />
      <Bar />  
    </div>
  )
}

export default observer(App)
